<template>
  <teleport to="body">
    <el-dialog
        v-model="visible"
        :title="null"
        width="580px"
        :before-close="handleClose"
        custom-class="login-dialog"
        :close-on-click-modal="false"
    >
      <div class="dialog-container">
        <!-- 左侧二维码 -->
        <div class="qrcode-section">
          <div class="qrcode-card">
            <img v-if="qrcodeStore.qrcode" :src="qrcodeStore.qrcode" class="qrcode-image">
            <div v-if="qrcodeStore.expired" class="qrcode-mask" >
              <div style="color: #fff;cursor: pointer;" @click="qrcodeStore.generate()">
                <el-icon :size="48"><Refresh /></el-icon>
                <p style="margin: 0;padding: 0">刷新二维码</p>
              </div>
            </div>
            <p class="qrcode-tip">微信扫一扫快速登录</p>
          </div>
        </div>

        <!-- 右侧表单 -->
        <div class="form-section">
          <div class="form-header">
            <h3>智优简历</h3>
          </div>

          <el-tabs v-model="activeTab">
            <el-tab-pane label="手机登录" name="phone">
              <el-form @submit.prevent="handleSubmit">
                <el-form-item>
                  <el-input
                      v-model="phone"
                      placeholder="请输入手机号"
                      prefix-icon="Iphone"
                  >
                    <template #prepend>
                      <el-select
                          v-model="areaCode"
                          style="width: 75px"
                          disabled
                      >
                        <el-option label="+86" value="86"/>
                        <el-option label="+852" value="852"/>
                        <el-option label="+853" value="853"/>
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item>
                  <el-input
                      v-model="smsCode"
                      placeholder="请输入验证码"
                      prefix-icon="Message"
                  >
                    <template #append>
                      <el-button
                          :disabled="countdown > 0"
                          @click="sendSmsCode"
                      >
                        {{ countdown ? `${countdown}s` : '获取验证码' }}
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item>
                  <el-button
                      native-type="submit"
                      type="primary"
                      round
                      class="submit-btn">
                    立即登录
                  </el-button>
                </el-form-item>

              </el-form>
            </el-tab-pane>

            <el-tab-pane label="密码登录" name="password">
              <el-form @submit.prevent="handleSubmit">
                <el-form-item>
                  <el-input
                      v-model="account"
                      placeholder="手机号/邮箱"
                      prefix-icon="User"
                  />
                </el-form-item>

                <el-form-item>
                  <el-input
                      v-model="password"
                      type="password"
                      placeholder="请输入密码"
                      prefix-icon="Lock"
                      show-password
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                      native-type="submit"
                      type="primary"
                      round
                      class="submit-btn"
                  >
                    立即登录
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <div style="width: 100%;display: flex;justify-content: center">
              <el-link
                  type="primary"
                  @click="toggleAuthMode"
              >
                {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
              </el-link>
            </div>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </teleport>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {useDynamicStore} from '@/store/index.js'  // 根据实际路径调整

const visible = ref(false)
const isLogin = ref(true)
const activeTab = ref('phone')

// 表单数据
const areaCode = ref('86')
const phone = ref('')
const smsCode = ref('')
const account = ref('')
const password = ref('')

// 验证码倒计时
const countdown = ref(0)
let smsTimer = null

// 二维码 Store
const qrcodeStore = useDynamicStore('qrcode')

const showDialog = () => {
  visible.value = true
}

const handleClose = () => {
  visible.value = false
  clearTimers()
}

const toggleAuthMode = () => {
  isLogin.value = !isLogin.value
  activeTab.value = 'phone'
}

// 监听对话框显示状态
watch(visible, (val) => {
  if (val) {
    qrcodeStore.generate()
  } else {
    qrcodeStore.$reset()
  }
})

// 发送验证码
const sendSmsCode = () => {
  if (!phone.value) {
    ElMessage.warning('请输入手机号码')
    return
  }

  countdown.value = 60
  smsTimer = setInterval(() => {
    if (--countdown.value <= 0) {
      clearInterval(smsTimer)
    }
  }, 1000)
}

// 清理所有计时器
const clearTimers = () => {
  clearInterval(smsTimer)
  smsTimer = null
}

// 处理表单提交
const handleSubmit = () => {
  if (activeTab.value === 'phone') {
    if (!phone.value || !smsCode.value) {
      ElMessage.warning('请填写完整信息')
      return
    }
  } else {
    if (!account.value || !password.value) {
      ElMessage.warning('请填写完整信息')
      return
    }
  }

  // 这里添加实际登录逻辑
  ElMessage.success('登录成功')
  visible.value = false
}

onBeforeUnmount(() => {
  clearTimers()
  qrcodeStore.$reset()
})

defineExpose({showDialog})
</script>

<style scoped lang="scss">
.dialog-container {
  display: flex;
  height: auto;

  .qrcode-section {
    flex: 0 0 220px;
    padding-right: 18px;
    border-right: 1px solid var(--el-border-color);

    .qrcode-card {
      position: relative;
      text-align: center;

      .qrcode-image {
        width: 180px;
        height: 180px;
        background: white;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .qrcode-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(97, 97, 97, 0.9);
        display: flex;
        flex-direction: column;
        height: 220px;
        align-items: center;
        justify-content: center;
        gap: 12px;

      }

      .qrcode-tip {
        @apply mt-4 text-sm text-gray-500;
      }
    }
  }

  .form-section {
    flex: 1;
    padding-left: 24px;

    .form-header {
      @apply mb-6 text-center;
      h3 {
        @apply text-xl font-medium mb-2;
      }
    }

    .el-form {
      @apply space-y-6;

      .submit-btn {
        @apply w-full mt-4 py-4;
        width: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .dialog-container {
    flex-direction: column;

    .qrcode-section {
      @apply border-r-0 border-b pb-6 mb-6 pr-0;
    }

    .form-section {
      @apply pl-0;
    }
  }
}
</style>
